<template>
  <div class="home">
    <el-container>
      <el-header class="homeHeader">
        <div style="display: flex">
          <div>医院门诊信息系统</div>
          <div style="margin-left: auto">
            <el-dropdown class="userInfo" @command="commandHandler">
          <span class="el-dropdown-link">
            <span style="font-size: larger">{{user.name}}</span>
            <img :src=user.headImage >
          </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
                  <el-dropdown-item command="setting">设置</el-dropdown-item>
                  <el-dropdown-item command="logout">注销</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-container>
        <el-aside width="200px">
<!--          <el-menu @select="menuClick">
            <el-menu-item index="/Home">
              <i class="el-icon-first-aid-kit"></i><span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-time"></i>门诊挂号</template>

                <el-menu-item index="/Register">预约挂号</el-menu-item>
                <el-menu-item index="/RegisterRecord">挂号记录</el-menu-item>

            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-menu"></i>门诊管理</template>
                <el-menu-item index="/Outpatients">门诊就诊</el-menu-item>
              <el-menu-item index="/OutpatientsRecord">就诊记录</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-bank-card"></i>划价收费</template>
                <el-menu-item index="/OutpatientsCharge">门诊收费</el-menu-item>
                <el-menu-item index="3-2">体检收费</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title"><i class="el-icon-s-cooperation"></i>药房取药</template>
              <el-menu-item index="4-1">药房取药</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title"><i class="el-icon-odometer"></i>体检管理</template>
              <el-menu-item index="5-1">普通体检</el-menu-item>

            </el-submenu>
            <el-submenu index="6">
              <template slot="title"><i class="el-icon-s-home"></i>药库管理</template>
              <el-menu-item index="/Drugs">药物管理</el-menu-item>
              <el-menu-item index="6-2">入库管理</el-menu-item>
            </el-submenu>
            <el-submenu index="7">
              <template slot="title"><i class="el-icon-user-solid"></i>用户管理</template>
              <el-menu-item index="/User">人员管理</el-menu-item>
              <el-menu-item index="">部门管理</el-menu-item>
              <el-menu-item index="">职称管理</el-menu-item>
            </el-submenu>
            <el-submenu index="8">
              <template slot="title"><i class="el-icon-s-tools"></i>系统管理</template>
              <el-menu-item index="8-1">公告管理</el-menu-item>
              <el-menu-item index="8-2">角色审核</el-menu-item>
            </el-submenu>
          </el-menu>-->
          <el-menu router unique-opened>
            <el-submenu :index="index+''" v-for="(item,index) in routes"
                        v-if="!item.hidden"
                        :key="index">
              <template slot="title">

                <i style="color: cornflowerblue;margin-right: 5px" :class="item.iconCls"></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item :index="children.path" v-for="(children,indexj) in item.children" :key="indexj">
                {{children.name}}
              </el-menu-item></el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="navigation">
            <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/home'">
              <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="homeWelcome" v-if="this.$router.currentRoute.path==='/home'">
            <div style="margin-bottom: 40px">欢迎来到医院门诊信息系统!</div>
            <div>
              <el-carousel :interval="4000" type="card" height="300px">
                <el-carousel-item v-for="item in images" :key="item.name">
                  <a href="#"><img :src="require('@/assets/img/'+item.name)"></a>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <router-view/></el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>


export default {
  name: 'Home',
  data(){
    return{
      //user:JSON.parse(window.sessionStorage.getItem('user')),
      images:[
        {
          name:'1.jpg'
        },
        {
          name:'2.jpg'
        },
        {
          name:'3.jpg'
        },
        {
          name:'4.jpg'
        }
      ]
    }
  },
  computed: {
    routes() {
      return this.$store.state.routes;
    },
    user(){
      return this.$store.state.currentUser;
    }
  },
  methods:{
    menuClick(index){
      this.$router.push(index);
    },
    commandHandler(command){
      if(command==="userinfo"){
        this.$router.push('/userInfo');
      }
      if(command==="logout"){

        this.$confirm(
            '此操作将注销登录，是否继续',
            '提示',
            {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning',
            }
        )
            .then(() => {
              //注销登录
              this.getRequest('/logout');
              //清空用户信息
              window.sessionStorage.removeItem('tokenStr');
              window.sessionStorage.removeItem('user');
              //跳转到登录页
              this.$router.replace('/');
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消注销',
              })
            })

      }
    }
  }
}
</script>
<style>
.homeHeader{
  color: cornflowerblue;
  font-size: 40px;
  font-family: 华文行楷;
  margin: 30px;

}
.homeWelcome{
  text-align: center;
  font-size: 40px;
  font-family: 华文行楷;
  color: cornflowerblue;
  padding-top: 20px;

}
.navigation{
  padding-bottom: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.el-dropdown-link img{
  width: 40px;
  height: 40px;
  border-radius: 24px;
  margin-left: 6px;
}
</style>
